<!--用户权限说明-->
<!--管理员：代码：1，可以做所有的操作-->
<!--问题编辑人员：代码：2，可以做问题的修改操作-->
<template>
  <div style="margin: 0;padding: 0">
    <el-container>
      <!--页面表头设计-->
      <el-header style="height: 7vh; display: flex; align-items: center; justify-content: space-between;">
        <el-link class="headMain" href="http://10.255.96.48:3404/">俄动力质量管理系统</el-link>
        <div class="center-text">问题管理</div>
        <el-popover
            placement="top-start"
            title="用户信息"
            width="200"
            trigger="hover">
          <div style="margin-top: 10px">Name：{{useName}}</div>
          <div style="margin-top: 10px">ID:{{useId}}</div>
          <div style="margin-top: 10px" @click="logOut"><el-link>退出</el-link></div>
          <div class="headMain" slot="reference">{{useName}}</div>
        </el-popover>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <div style="height: 90%;overflow-y: auto">
            <div style="margin-top: 10px">
              <el-card shadow="always">
                <div slot="header" class="clearfix" style="text-align: left">
                  <span>选择为：</span>
                  <span>{{typeUseName}}</span>
                </div>
                <div>
                  <span>数量为：</span>
                  <span v-if="tableData && Array.isArray(tableData)">{{ tableData.length }}个</span>
                  <span v-else>无数据</span>
                </div>
              </el-card>
            </div>
            <div style="margin-top: 10px;text-align: left">
              <span>选择一：问题范围</span>
              <el-select v-model="radioType1" placeholder="我自己" style="margin-top: 5px">
                <el-option
                    v-for="item in optionsRadioType1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div style="margin-top: 10px;text-align: left">
              <span>选择二：结题类型</span>
              <el-select v-model="radioType2" placeholder="未结题" style="margin-top: 5px">
                <el-option
                    v-for="item in optionsRadioType2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div style="margin-top: 10px">
              <i class="el-icon-back"></i>
              <el-link type="primary" @click="rollingOne(1)">上一条</el-link>&nbsp;&nbsp;&nbsp;&nbsp;
              <el-link type="primary" @click="rollingOne(2)">下一条</el-link>
              <i class="el-icon-right"></i>
            </div>
            <div style="margin-top: 10px">
              <el-button @click="queryUse(1)" type="info" plain style="width: 100%;" :style="background1">查询汇报</el-button>
            </div>
            <div style="margin-top: 10px">
              <el-button @click="queryUse(2)" type="info" plain style="width: 100%" :style="background2">查询全部</el-button>
            </div>
            <div style="margin-top: 10px">
              <el-button @click="queryUse(3)" type="info" plain style="width: 100%" :style="background3">按录入日期查询</el-button>
            </div>
            <div style="margin-top: 10px">
              <el-button @click="queryUse(4)" type="info" plain style="width: 100%" :style="background4">按发生日期查询</el-button>
            </div>
          </div>
          <div>
            <el-link type="primary" @click="addOp(1)" v-if="usePower===1">添加问题</el-link>&nbsp;&nbsp;&nbsp;
            <el-link type="primary" @click="addOp(2)" v-if="usePower===1">修改问题</el-link>
          </div>

        </el-aside>
        <el-container>
          <!--主题设计-->
          <el-main>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="问题汇报" name="first">
                <div style="text-align: left;font-size: 17px;color: red">
                  <el-link style="font-size: 18px;color: red;margin-bottom: 5px" @click="editProb(34)">结论先行:</el-link>&nbsp;
                  <span>{{tableDataTemp.conclusion}}</span>

                </div>
                <div style="width: 84vw; height: 65vh; overflow-x: auto; overflow-y: auto; border: 1px solid black;">
                  <table class="blue-border" style="min-width: 1810px;">
                    <thead class="tableTh">
                    <tr class="tableTr">
                      <th class="tableTh" style="width: 100px">问题描述</th>
                      <th class="tableTh" style="width: 550px">原因分析</th>
                      <th class="tableTh" colspan="2">整改对策</th>
                      <th class="tableTh" style="width: 120px">完成时间</th>
                      <th class="tableTh" style="width: 100px">负责人</th>
                      <th class="tableTh" style="width: 100px">输出</th>
                      <th class="tableTh" style="width: 120px">效果评价</th>
                      <th class="tableTh" style="width: 120px">验证时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- 第一行 -->
                    <tr>
                      <td rowspan="6" style="text-align: left;">
                        <el-link style="font-size: 18px;color: red" @click="editProb(1)">问题描述：</el-link>
                        <br><br>
                        <div v-html="tableDataTemp.describeUse"></div>
                        <br><br>
                        <el-link style="font-size: 18px;color: red" @click="editProb(2)">数量：</el-link>
                        {{tableDataTemp.quantity}}
                      </td>
                      <td rowspan="6" style="text-align: left;">
                        <el-link style="font-size: 18px;color: red" @click="editProb(3)">现状调查：</el-link><br>
                        <div v-html="tableDataTemp.statusUse"></div>
                        <el-link style="font-size: 18px;color: red" @click="editProb(4)">发生源(产生问题的作用源）：</el-link><br>
                        <div v-html="tableDataTemp.origin"></div>
                        <el-link style="font-size: 18px;color: red" @click="editProb(5)">流出源（含预测、预防）：</el-link><br>
                        <div v-html="tableDataTemp.outflow"></div>
                      </td>
                      <td style="width: 50px">
                        <el-link @click="editProb(6)">纠正/遏制</el-link>
                      </td>
                      <td style="width: 450px">
                        <div v-html="tableDataTemp.correct" style="text-align: left"></div>
                      </td>
                      <td style="text-align: right">
                        <span v-html="tableDataTemp.correctDate"></span>&nbsp;
                        <el-link>
                          <i class="el-icon-edit" @click="editProb(7)"></i>
                        </el-link>
                      </td>
                      <td style="text-align: right">
                        <span v-html="tableDataTemp.correctLiability"></span>&nbsp;
                        <el-link>
                          <i class="el-icon-edit" @click="editProb(8)"></i>
                        </el-link>
                      </td>
                      <td style="text-align: right">
                        <el-popover
                            placement="top-start"
                            title="信息："
                            width="200"
                            trigger="hover"
                            :content="tableDataTemp.correctOut">
                          <el-link slot="reference" >移动显示</el-link>
                        </el-popover>&nbsp;
                        <el-link>
                          <i class="el-icon-edit" @click="editProb(9)"></i>
                        </el-link>
                      </td>
                      <td style="text-align: right">
                        <el-popover
                            placement="top-start"
                            title="信息："
                            width="200"
                            trigger="hover"
                            :content="tableDataTemp.correctResult">
                          <el-link slot="reference" >移动显示</el-link>
                        </el-popover>&nbsp;
                        <el-link @click="editProb(10)">
                          <i class="el-icon-edit"></i>
                        </el-link>
                      </td>
                      <td style="text-align: right">
                        <span v-html="tableDataTemp.correctValidate"></span>&nbsp;
                        <el-link @click="editProb(11)">
                          <i class="el-icon-edit"></i>
                        </el-link>
                      </td>
                    </tr>
                    <!-- 第二行 -->
                    <tr>
                      <td rowspan="4">纠正措施</td>
                      <td rowspan="2" style="text-align: left;">
                        <el-link style="font-size: 18px;color: red" @click="editProb(12)">临时措施：</el-link>
                        <div v-html="tableDataTemp.temporaryUse" style="text-align: left"></div>
                      </td>
                      <td rowspan="2" style="text-align: right">
                        <span v-html="tableDataTemp.temporaryDate"></span>&nbsp;
                        <el-link @click="editProb(13)">
                          <i class="el-icon-edit"></i>
                        </el-link>
                      </td>
                      <td rowspan="2" style="text-align: right">
                        <span v-html="tableDataTemp.temporaryLiability"></span>&nbsp;
                        <el-link @click="editProb(14)">
                          <i class="el-icon-edit"></i>
                        </el-link>
                      </td>
                      <td rowspan="2" style="text-align: right">
                        <el-popover
                            placement="top-start"
                            title="信息："
                            width="200"
                            trigger="hover"
                            :content="tableDataTemp.temporaryOut">
                          <el-link slot="reference" >移动显示</el-link>
                        </el-popover>&nbsp;
                        <el-link @click="editProb(15)">
                          <i class="el-icon-edit"></i>
                        </el-link>
                      </td>
                      <td rowspan="2" style="text-align: right">
                        <el-popover
                            placement="top-start"
                            title="信息："
                            width="200"
                            trigger="hover"
                            :content="tableDataTemp.temporaryResult">
                          <el-link slot="reference" >移动显示</el-link>
                        </el-popover>&nbsp;
                        <el-link @click="editProb(16)">
                          <i class="el-icon-edit"></i>
                        </el-link>
                      </td>
                      <td rowspan="2" style="text-align: right">
                        <span v-html="tableDataTemp.temporaryValidate"></span>&nbsp;
                        <el-link @click="editProb(17)">
                          <i class="el-icon-edit"></i>
                        </el-link>
                      </td>
                    </tr>
                    <!-- 第三行 -->
                    <tr>
                    </tr>
                    <!-- 第四行 -->
                    <tr>
                      <td rowspan="2" style="text-align: left;">
                        <el-link style="font-size: 18px;color: red" @click="editProb(18)">长远措施：</el-link>
                        <div v-html="tableDataTemp.permanent" style="text-align: left"></div>
                      </td>
                      <td rowspan="2" style="text-align: right">
                        <span v-html="tableDataTemp.permanentDate"></span>&nbsp;
                        <el-link @click="editProb(19)">
                          <i class="el-icon-edit"></i>
                        </el-link>
                      </td>
                      <td rowspan="2" style="text-align: right">
                        <span v-html="tableDataTemp.permanentLiability"></span>&nbsp;
                        <el-link @click="editProb(20)">
                          <i class="el-icon-edit"></i>
                        </el-link>
                      </td>
                      <td rowspan="2" style="text-align: right">
                        <el-popover
                            placement="top-start"
                            title="信息："
                            width="200"
                            trigger="hover"
                            :content="tableDataTemp.permanentOut">
                          <el-link slot="reference" >移动显示</el-link>
                        </el-popover>&nbsp;
                        <el-link @click="editProb(21)">
                          <i class="el-icon-edit"></i>
                        </el-link>
                      </td>
                      <td rowspan="2" style="text-align: right">
                        <el-popover
                            placement="top-start"
                            title="信息："
                            width="200"
                            trigger="hover"
                            :content="tableDataTemp.permanentResult">
                          <el-link slot="reference" >移动显示</el-link>
                        </el-popover>&nbsp;
                        <el-link @click="editProb(22)">
                          <i class="el-icon-edit"></i>
                        </el-link>
                      </td>
                      <td rowspan="2" style="text-align: right">
                        <span v-html="tableDataTemp.permanentValidate"></span>&nbsp;
                        <el-link @click="editProb(23)">
                          <i class="el-icon-edit"></i>
                        </el-link>
                      </td>
                    </tr>
                    <!-- 第五行 -->
                    <tr>
                    </tr>
                    <!-- 第六行 -->
                    <tr>
                      <td>
                        <el-link @click="editProb(24)">不足反省</el-link>
                      </td>
                      <!-- 重复添加数据单元格，直到有7个 -->
                      <td style="text-align: left;">
                        <div v-html="tableDataTemp.introspection"></div>
                      </td>
                      <td style="text-align: right">
                        <span v-html="tableDataTemp.introspectionDate"></span>&nbsp;
                        <el-link @click="editProb(25)">
                          <i class="el-icon-edit"></i>
                        </el-link>
                      </td>
                      <td style="text-align: right">
                        <span v-html="tableDataTemp.introspectionLiability"></span>&nbsp;
                        <el-link @click="editProb(26)">
                          <i class="el-icon-edit"></i>
                        </el-link>
                      </td>
                      <td style="text-align: right">
                        <el-popover
                            placement="top-start"
                            title="信息："
                            width="200"
                            trigger="hover"
                            :content="tableDataTemp.introspectionOut">
                          <el-link slot="reference" >移动显示</el-link>
                        </el-popover>&nbsp;
                        <el-link @click="editProb(27)">
                          <i class="el-icon-edit"></i>
                        </el-link>
                      </td>
                      <td style="text-align: right">
                        <el-popover
                            placement="top-start"
                            title="信息："
                            width="200"
                            trigger="hover"
                            :content="tableDataTemp.introspectionResult">
                          <el-link slot="reference" >移动显示</el-link>
                        </el-popover>&nbsp;
                        <el-link @click="editProb(28)">
                          <i class="el-icon-edit"></i>
                        </el-link>
                      </td>
                      <td style="text-align: right">
                        <span v-html="tableDataTemp.introspectionValidate"></span>&nbsp;
                        <el-link @click="editProb(29)">
                          <i class="el-icon-edit"></i>
                        </el-link>
                      </td>
                    </tr>
                    <!-- 第七行 -->
                    <tr>
                      <td>
                        <el-link
                            style="color: red;font-weight: bold;font-size: 16px"
                            @click="editProb(33)"
                            v-if="usePower===1">汇报：{{tableDataTemp.report}}</el-link>
                      </td>
                      <td style="text-align: left;">
                        <span>发生日期：{{tableDataTemp.occurDate}}</span>
                        <span style="margin-left: 20px">记录日期：{{tableDataTemp.establishTime}}</span>
                      </td>
                      <td style="text-align: right">
                        <el-link>
                          责任人
                        </el-link>
                      </td>
                      <td style="text-align:left">
                        <span>姓名：{{tableDataTemp.liability}}</span>
                        <span style="margin-left: 20px">工号：{{tableDataTemp.liabilityNub}}</span>
                      </td>
                      <td style="text-align: center">
                        <el-link style="color: red;font-weight: bold;font-size: 16px" @click="editProb(30)">切换时间</el-link>
                      </td>
                      <td style="text-align: right">
                          {{tableDataTemp.switchDate}}
                      </td>
                      <td style="text-align: center">
                        <el-link style="color: red;font-weight: bold;font-size: 16px" @click="editProb(31)">
                         切换工件号
                        </el-link>
                      </td>
                      <td style="text-align: center">
                        {{tableDataTemp.switchNumber}}
                      </td>
                      <td style="text-align: center">
                        <el-link
                            style="color: red;font-weight: bold;font-size: 16px"
                            @click="editProb(32)"
                            v-if="userPermissions===1">结题状态：{{tableDataTemp.finish}}</el-link>
                      </td>
                    </tr>
                    <!-- 第八行 -->
                    <tr>
                      <td colspan="9">
                        <div style="margin-top: 10px; border: 1px solid #0269fa;padding: 10px; text-align: left"
                             v-if="tableDataTemp!==''">
                          <el-upload
                              action="http://10.255.96.48:3499/russiaEngine/"
                              list-type="picture-card"
                              :auto-upload="false"
                              :on-change="(file, fileList) => saveFileDescribeAnnex(file, fileList)"
                              :file-list="describePictureList"
                              :disabled="describeAnnexDisabled">
                            <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{file}">
                              <img
                                  class="el-upload-list__item-thumbnail"
                                  :src="file.url" alt="">
                              <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                              <i class="el-icon-zoom-in"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                                  <i class="el-icon-download"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                  <i class="el-icon-delete"></i>
                                </span>
                              </span>
                            </div>
                          </el-upload>
                        </div>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>

              </el-tab-pane>
              <el-tab-pane label="问题管理" name="second">
                <el-table
                    :data="tableData"
                    border
                    style="width: 100%" height="68vh">
                  <el-table-column
                      prop="workshop"
                      label="车间名称"
                      width="130"
                      v-slot:default="scope">
                    <span v-if="languageS==='chinese'">{{scope.row.workshop.split('/')[0]}}</span>
                    <span v-else-if="languageS==='english'">{{scope.row.workshop.split('/')[1]}}</span>
                    <span v-else-if="languageS==='russian'">{{scope.row.workshop.split('/')[2]}}</span>
                  </el-table-column>
                  <el-table-column
                      prop="op"
                      label="工序号"
                      width="80">
                  </el-table-column>
                  <el-table-column
                      prop="problemName"
                      label="问题名称"
                      width="180">
                  </el-table-column>
                  <el-table-column
                      prop="liability"
                      label="责任人"
                      width="80">
                  </el-table-column>
                  <el-table-column
                      prop="liabilityNub"
                      label="责任人工号"
                      width="100">
                  </el-table-column>
                  <el-table-column
                      prop="describeUse"
                      label="问题描述"
                      width="270"
                      v-slot:default="scope">
                    <span v-html="scope.row.describeUse"></span>
                  </el-table-column>
                  <el-table-column
                      prop="type1"
                      label="大分类"
                      width="80">
                  </el-table-column>
                  <el-table-column
                      prop="type2"
                      label="小分类"
                      width="80">
                  </el-table-column>
                  <el-table-column
                      prop="finish"
                      label="是否结题">
                  </el-table-column>
                  <el-table-column
                      prop="report"
                      label="是否汇报"
                      v-slot:default="scope">
                    {{scope.row.report}}
                    <i class="el-icon-edit" @click="management(scope,1)"></i>
                  </el-table-column>
                  <el-table-column label="编辑" width="130px" v-slot:default="scope">
                    <el-link type="primary" @click="handleEdit(scope,1)" v-if="tableData[0].id!==-1 || tableData.length>1">编辑&nbsp;&nbsp;</el-link>
                    <el-link type="primary" @click="handleEdit(scope,2)" v-if="tableData[0].id!==-1 || tableData.length>1">查看详细</el-link>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-main>
          <el-footer>
            <el-button plain size="small" @click="chooseLanguage('chinese')">中  文</el-button>
            <el-button plain size="small" @click="chooseLanguage('russian')">Русский язык</el-button>
            <el-button plain size="small" @click="chooseLanguage('english')">English</el-button>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>

    <!--弹窗放置区-->
    <!--单击问题编辑区的弹窗，需要富文本区域的地方使用-->
    <el-dialog
        :title="titleUse"
        :visible.sync="dialogVisible"
        width="60%"
        :before-close="handleClose">
      <div ref="editorContainer" style="text-align: left"></div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveProblem">确 定</el-button>
  </span>
    </el-dialog>
    <!--单击问题编辑区的弹窗，需要一个输入数据的地方使用-->
    <el-dialog
        :title="titleUse"
        :visible.sync="dialogVisibleNub"
        width="30%"
        :before-close="handleClose">
      <el-input-number label="请输入数量" v-model="inputNub"></el-input-number>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleNub = false">取 消</el-button>
    <el-button type="primary" @click="saveProblem">确 定</el-button>
  </span>
    </el-dialog>
    <!--单击问题编辑区的弹窗，需要一个输入文本日期的地方-->
    <el-dialog
        :title="titleUse"
        :visible.sync="dialogVisibleDate"
        width="30%"
        :before-close="handleClose">
      <el-date-picker
          v-model="valueDate"
          type="date"
          placeholder="选择日期">
      </el-date-picker>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleDate = false">取 消</el-button>
    <el-button type="primary" @click="saveProblem">确 定</el-button>
  </span>
    </el-dialog>
    <!--单击问题编辑区的弹窗，需要一个输入负责人的地方-->
    <el-dialog
        :title="titleUse"
        :visible.sync="dialogVisibleName"
        width="30%"
        :before-close="handleClose">
      <el-input placeholder="请输入内容" v-model="inputName" style="width: 100%"></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleName = false">取 消</el-button>
    <el-button type="primary" @click="saveProblem">确 定</el-button>
  </span>
    </el-dialog>
    <!--单击问题编辑区的弹窗，选择是，否结题的区域-->
    <el-dialog
        :title="titleUse"
        :visible.sync="dialogVisibleYes"
        width="30%"
        :before-close="handleClose">
      <el-switch
          v-model="valueYes"
          active-text="是"
          inactive-text="否">
      </el-switch>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleYes = false">取 消</el-button>
    <el-button type="primary" @click="saveProblem">确 定</el-button>
  </span>
    </el-dialog>
    <!--单击按日期查询等按钮，弹出的日历框-->
    <el-dialog
        :title="titleUse"
        :visible.sync="dialogVisibleSelData"
        width="30%"
        :before-close="handleClose">
      <div>
        <el-date-picker
            v-model="valueSelDate"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleSelData = false">取 消</el-button>
    <el-button type="primary" @click="selData">确 定</el-button>
  </span>
    </el-dialog>
    <!--添加问题的，固定多个填写内容地方使用-->
    <el-dialog
        title="正在添加/修改问题"
        :visible.sync="dialogVisibleAddP"
        width="30%"
        :before-close="handleClose">
      <el-form ref="tableDataForm" :model="tableDataForm" label-width="120px">
        <el-form-item label="车间名称：" prop="workshop">
          <el-select v-model="tableDataForm.workshop" placeholder="请选择" style="width: 80%">
            <el-option
                v-for="item in optionWorkshop"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品图号：" prop="drawing">
          <el-select v-model="tableDataForm.drawing" placeholder="请选择" style="width: 80%">
            <el-option
                v-for="item in optionAssembly"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工 序 号：" prop="op">
          <el-select v-model="tableDataForm.op" placeholder="请选择" style="width: 80%">
            <el-option
                v-for="item in OpAssembly()"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="责任人：" prop="liability">
          <el-input placeholder="请输入责任人姓名" style="width: 80%" v-model="tableDataForm.liability"></el-input>
        </el-form-item>
        <el-form-item label="工   号：" prop="liabilityNub">
          <el-input placeholder="请输入责任人工号" style="width: 80%" v-model="tableDataForm.liabilityNub"></el-input>
        </el-form-item>
        <el-form-item label="发生日期：" prop="occurDate">
          <div class="block">
            <el-date-picker style="width: 80%"
                v-model="tableDataForm.occurDate"
                type="date"
                placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="发生数量：" prop="quantity">
          <div class="block">
            <el-input-number style="width: 80%" v-model="tableDataForm.quantity" :min="1" :max="10000"></el-input-number>
          </div>
        </el-form-item>
        <el-form-item label="问题名称：" prop="problemName">
          <el-input style="width: 80%" placeholder="请输入问题名称" type="textarea"
                    :autosize="{ minRows: 1, maxRows: 3}" v-model="tableDataForm.problemName"></el-input>
        </el-form-item>
        <el-form-item label="问题描述：" prop="describeUse">
          <el-input placeholder="请输入问题描述" type="textarea" style="width: 80%"
                    :autosize="{ minRows: 1, maxRows: 4}" v-model="tableDataForm.describeUse"></el-input>
        </el-form-item>
        <el-form-item label="问题分类：" prop="describeUse">
          <el-select v-model="type1" :placeholder="type1" style="width: 120px">
            <el-option
                v-for="item in optionsType1"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="type2" :placeholder="type2" style="width: 120px">
            <el-option
                v-for="item in optionsType2"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button @click="dialogVisibleAddP=false">取消</el-button>
          <el-button type="primary" @click="problemAdd">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--点击加油点位置的图片后，出现的弹窗，显示点击的照片-->
    <el-dialog :visible.sync="dialogVP">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>


    <!--抽屉放置区域-->
    <el-drawer
        title="选择问题"
        :visible.sync="drawer"
        :direction="direction">

        <div>
          <el-tree
              :data="TreeList"
              :props="defaultProps"
               node-key="id"
               @node-click="handleNodeClick">
          </el-tree>
        </div>
    </el-drawer>
  </div>
</template>

<script>
import E from 'wangeditor';
import {filepath, OpAssembly} from "@/configUse";
import _ from 'lodash';
export default {
  name: "problemManagement",
  components: {},
  data() {
    return {
      //控制分页控件
      activeName: 'first',
      //控制手风琴的页面
      activeName1: '',
      editor: null, // 用于存储 wangEditor 实例
      //做导航栏的组合
      TreeList: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      collapseItems: [],

      //抽屉的控制变量
      drawer: false,
      direction: 'ltr',

      tableData: [],
      tableDataTemp: {
        //主键
        idUse: -1,
        // 车间名称
        workshop: '',
        //产品图号
        drawing: '',
        //工序号
        op: '',
        //发生日期
        occurDate: '',
        //记录人
        noteTaker: '',
        //责任人
        liability: '',
        //责任人工号
        liabilityNub: '',
        //问题名称
        problemName: '',
        //问题描述
        describeUse: '',
        //问题描述的图片附件
        describeAnnex:'',
        //问题数量
        quantity: 1,
        //反思
        introspection: '针对人工作业工位，前期虽已识别出风险，且制定管控措施，但仍发生不良流出。暴露出标准作业的规划和设计对质量风险评估识别不充分。\n' +
            '下一步：组织技术员对车间手动作业工位质量风险再次进行评估，识别问题并改进，完成时间：2024.3.23',
        //现状调查
        statusUse: '①EN04与EN03变化点，OP150序增加主轴承盖销套压装工艺，压装机工程改造中，计划4月15日完成。临时手动压装；\n' +
            '②风险识别：EN04生产初期，已识别出销套压装存在压深、压浅、漏压风险。为规避此风险，2月29日调整双人作业内容，OP155序由第1人压装销套、第2人确认压装质量、安装瓦盖，并调整生产工艺；\n' +
            '③确认故障件销套不晃动，排除销套孔大或销套直径小问题；\n' +
            '④经查此件为2024年3月6日日夜班生产，00:15进入OP160拧紧机，1:56最终试漏机下线，过程无返工返修等异常离线记录；\n' +
            '⑤变化点：2月26日，厂家制作压装销套工装断裂（经分析工装存在原始裂纹，已索赔厂家）。临时自制工装，下发变化点加倍检测（1次/50件加严至1次/25件），强换频次600件。此故障件为第四次更换约580件。',
        //发生源
        origin: '压装深度靠工装限位保证，员工手动使用气锤压装，过程依靠声音和手感确认是否压装到位（作业要领书：按压气锤开关，压装到底后保持2-3s，听到“哒哒”声时，松开开关），作业一致性差，偶发产生压装浅问题。',
        //流出源
        outflow: 'OP155序第2名操作者100%目视确认销套压装质量、1/25检测压装深度，高度差2.5mm目视不易发现，造成频次外工件不良流出',
        //临时措施
        temporaryUse: '①制作销套检测工装，操作者100%检查确认压装后销套高度，防止不良流出；\n' +
            '②依据图纸委外重新制作销套压装工装，保证压装质量',
        //长远措施
        permanent: '',
        //整改过程的附件记录
        permanentAnnex:'',
        //纠正
        correct: '',
        //切换发动机/零部件号日期
        switchDate: '',
        //切换发动机号/零部件号
        switchNumber: '',
        //“纠正”的完成时间
        correctDate: '',
        //"纠正的"负责人
        correctLiability: '',
        //"纠正"的输出
        correctOut: '',
        //"纠正“的效果评价
        correctResult: '',
        //"纠正“的验证完成时间
        correctValidate: '',
        //“临时措施”的完成时间
        temporaryDate: '',
        //"临时措施"的负责人
        temporaryLiability: '',
        //"临时措施"的输出
        temporaryOut: '',
        //"临时措施“的效果评价
        temporaryResult: '',
        //"临时措施“的验证人
        temporaryValidate: '',
        //“长远措施”的完成时间
        permanentDate: '',
        //"长远措施"的负责人
        permanentLiability: '',
        //"长远措施"的输出
        permanentOut: '',
        //"长远措施“的效果评价
        permanentResult: '',
        //"长远措施“的验证人
        permanentValidate: '',
        //“不足反省”的完成时间
        introspectionDate: '',
        //"不足反省"的负责人
        introspectionLiability: '',
        //"不足反省"的输出
        introspectionOut: '',
        //"不足反省“的效果评价
        introspectionResult: '',
        //"不足反省“的验证人
        introspectionValidate: '',
        //结论先行
        conclusion: '',
        //结题状态标签
        finish: '否',
        //记录是否需要汇报
        report: '',
        //大的分类的选择器
        type1: '',
        //小分类
        type2: '',
        //大分类选项
      },
      tableDataForm: {
        //主键
        idUse: '',
        // 车间名称
        workshop: '请编辑',
        //产品图号
        drawing: '请编辑',
        //工序号
        op: '请编辑',
        //发生日期
        occurDate: '请编辑',
        //记录人
        noteTaker: '请编辑',
        //责任人
        liability: '请编辑',
        //责任人工号
        liabilityNub: '请编辑',
        //问题名称
        problemName: '请编辑',
        //问题描述
        describeUse: '请编辑',
        //问题数量
        quantity: 1,
        //反思
        introspection: '请编辑',
        //现状调查
        statusUse: '请编辑',
        //发生源
        origin: '请编辑',
        //流出源
        outflow: '请编辑',
        //临时措施
        temporaryUse: '请编辑',
        //长远措施
        permanent: '请编辑',
        //纠正
        correct: '请编辑',
        //切换发动机/零部件号日期
        switchDate: '请编辑',
        //切换发动机号/零部件号
        switchNumber: '请编辑',
        //“纠正”的完成时间
        correctDate: '请编辑',
        //"纠正的"负责人
        correctLiability: '请编辑',
        //"纠正"的输出
        correctOut: '请编辑',
        //"纠正“的效果评价
        correctResult: '请编辑',
        //"纠正“的验证人
        correctValidate: '请编辑',
        //“临时措施”的完成时间
        temporaryDate: '请编辑',
        //"临时措施"的负责人
        temporaryLiability: '请编辑',
        //"临时措施"的输出
        temporaryOut: '请编辑',
        //"临时措施“的效果评价
        temporaryResult: '请编辑',
        //"临时措施“的验证人
        temporaryValidate: '请编辑',

        //“长远措施”的完成时间
        permanentDate: '请编辑',
        //"长远措施"的负责人
        permanentLiability: '请编辑',
        //"长远措施"的输出
        permanentOut: '请编辑',
        //"长远措施“的效果评价
        permanentResult: '请编辑',
        //"长远措施“的验证人
        permanentValidate: '请编辑',

        //“不足反省”的完成时间
        introspectionDate: '请编辑',
        //"不足反省"的负责人
        introspectionLiability: '请编辑',
        //"不足反省"的输出
        introspectionOut: '请编辑',
        //"不足反省“的效果评价
        introspectionResult: '请编辑',
        //"不足反省“的验证人
        introspectionValidate: '请编辑',
        //结论先行
        conclusion: '',
        //结题状态标签
        finish: '否',
        //记录是否需要汇报
        report: '',
        //大的分类的选择器
        type1: '',
        //小分类
        type2: '',
        //大分类选项
      },
      optionWorkshop: [{
        value: '装配车间/Assembly workshop/Сборочная линия',
        label: '装配车间/Assembly workshop/Сборочная линия'
      }, {
        value: '机加车间/Machining workshop/Машиностроительный цех',
        label: '机加车间/Machining workshop/Машиностроительный цех'
      },],
      optionAssembly: [{
        value: '1000100XEB05',
        label: '1000100XEB05'
      }, {
        value: '1000100XEB35',
        label: '1000100XEB35'
      },
        {
          value: '1000100XEN19',
          label: '1000100XEN19'
        },],
      //弹框的控制变量-修改问题描述
      dialogVisible: false,
      //弹框的控制变量-添加问题
      dialogVisibleAddP: false,
      //弹窗，弹窗中只有一个数字输入框
      dialogVisibleNub: false,
      //弹窗，弹窗中只时间选择器
      dialogVisibleDate: false,
      //弹窗，弹窗中有一个输入框，输入姓名
      dialogVisibleName: false,
      //弹窗，添加问题的弹窗
      dialogVisibleAddNmb: false,
      //弹窗，选择是、否的地方
      dialogVisibleYes: false,
      //弹窗，显示一个日历控件
      dialogVisibleSelData:false,
      //弹窗，点击图片的时候，放大图片
      dialogVP:false,
      //弹窗显示的内容
      titleUse: '提示',

      //记录用户权限
      userPermissions: 0,

      //用户选择的编辑区域
      doeSave: 0,
      //用户输入的数据（整数类型，现在记录的是发生数量）
      inputNub: 1,
      //用户输入的日期选择
      valueDate: '',
      //用户选择的“是、否
      valueYes: false,
      //用户用于筛选的日期是多少
      valueSelDate:'',

      //用户输入的姓名

      inputName: '',
      //固定选择器的选项
      //大的分类的选择器
      type1: '请选择',
      //小分类
      type2: '请选择',
      //大分类选项
      optionsType1: [{
        value: '质量',
        label: '质量'
      },
        {
          value: '效率',
          label: '效率'
        }],
      //小分类选项
      optionsType2: [
        {
          value: '外购件',
          label: '外购件'
        }, {
          value: '工装',
          label: '工装'
        },
        {
          value: '设备',
          label: '设备'
        },
        {
          value: '工艺',
          label: '工艺'
        },
        {
          value: '人员',
          label: '人员'
        }],
      //用户筛选用到的变量
      // 按照选择的时间范围选择
      valueUseS: '',
      //用户选择的查询类型
      queryUseType: 0,
      // 用户选择的筛选类型名称
      typeUseName: '',

      //用户添加问题的变量
      adddoe: 0,

      //用户按钮的选择，颜色变化
      background1: '',
      background2: '',
      background3: '',
      background4: '',

      //记录用户选择的情况，我自己的，结题、未结题的灯
      //选择是否为自己的
      radioType1:'my',
      radioType2:'noEnd',
      optionsRadioType1:[{label:'我自己', value:'my',}, {label:'全部', value:'all',}],
      optionsRadioType2:[{label:'全部', value:'all',}, {label:'未结题', value:'noEnd',}, {label:'结题', value:'end',}],

      //用户选择的那个问题，传出选择的问题在数据中的索引值
      problemIndex: -1,
      //记录语言选择的类型
      languageS:'chinese',
      //用户权限相关的变量
      useName:'',//用户名称
      useId:'',//用户编号
      usePower:'',//用户权限

      //图片上传相关的变量
      //问题描述部分的图片列表
      describePictureList:[],
      disabled: false,
      //弹窗放大的图片地址
      dialogImageUrl:'',
      //控制原因分析部位的图片上传是否可用
      describeAnnexDisabled:true,


    }


  },
  watch: {},
  methods: {
    //退出登录
    logOut(){
      localStorage.removeItem('u_token');
      localStorage.removeItem('userName')
      this.$router.push('UserLogin')
    },
    //查询用户信息的函数
    inquiry(){
      //输入用户编号，向后端查询信息
      const useId=localStorage.getItem('userName').replace(/"/g, '');
      this.$request.post('/useQueryPower',{
        queryFiledName:'problemManagement',
        userId:useId,
      }).then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        }else {
          this.useName=result.data.name
          this.usePower=result.data.problemManagement
          this.useId=useId
          console.log(this.useId,this.usePower,this.useName)
        }
      })
    },
    OpAssembly() {
      return OpAssembly
    },
    //添加问题/修改问题，点击后打开弹窗
    addOp(doe) {
      this.adddoe = doe
      if (doe === 1) {
        this.tableDataForm.workshop = ''
        this.tableDataForm.drawing = ''
        this.tableDataForm.op = ''
        this.tableDataForm.occurDate = ''
        this.tableDataForm.problemName = ''
        this.tableDataForm.liability = ''
        this.tableDataForm.liabilityNub = ''
        this.tableDataForm.describeUse = ''
        this.tableDataForm.quantity = 1
        this.type1 = '质量'
        this.type2 = '外购件'
        this.dialogVisibleAddP = true
      }
      else if (doe === 2) {
        if (this.tableDataTemp === '') {
          alert("未选择问题，请先选择问题")
        } else {
          this.tableDataForm = _.cloneDeep(this.tableDataTemp);
          this.type1 = _.cloneDeep(this.tableDataForm.type1)
          this.type2 = this.tableDataForm.type2
          this.dialogVisibleAddP = true

        }
      }

    },
    //点击添加问题/修改问题，进行编辑问题
    problemAdd() {
      console.log("到这里了")
      if (this.adddoe === 1) {
        //校验有问题，自己校验
        if (this.tableDataForm.occurDate === '' || this.tableDataForm.workshop === '' || this.tableDataForm.drawing === '' || this.tableDataForm.op === '' || this.tableDataForm.occurDate === '' || this.tableDataForm.problemName === '' || this.tableDataForm.liability === '' || this.tableDataForm.liabilityNub === '' || this.tableDataForm.describeUse === '') {
          alert("有数据未填写，请填写后再提交")
        } else {
          //把时间格式修改为标准格式
          const date = new Date(this.tableDataForm.occurDate);
          const year = date.getFullYear().toString().padStart(4, '0');
          const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
          const day = date.getDate().toString().padStart(2, '0');
          this.tableDataForm.occurDate = `${year}-${month}-${day}`
          //组合分类
          this.tableDataForm.type1 = this.type1
          this.tableDataForm.type2 = this.type2
          //向后端发送请求，保存问题
          this.$request.post('/problemAdd', this.tableDataForm).then(result => {
            if (result.code === 401) {
              this.$router.push('UserLogin')
              alert("您未登录，请登录")
            } else {
              alert("保存成功")
              this.dialogVisibleAddP = false
              this.mountedNew()
            }
          })
        }
      }
      //是要修改问题
      else if (this.adddoe === 2) {
        if (this.tableDataForm.occurDate === '' || this.tableDataForm.workshop === '' || this.tableDataForm.drawing === '' || this.tableDataForm.op === '' || this.tableDataForm.occurDate === '' || this.tableDataForm.problemName === '' || this.tableDataForm.liability === '' || this.tableDataForm.liabilityNub === '' || this.tableDataForm.describeUse === '') {
          alert("有数据未填写，请填写后再提交")
        }
        else {
          //把时间格式修改为标准格式
          const date = new Date(this.tableDataForm.occurDate);
          const year = date.getFullYear().toString().padStart(4, '0');
          const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
          const day = date.getDate().toString().padStart(2, '0');
          this.tableDataForm.occurDate = `${year}-${month}-${day}`
          //组合分类
          this.tableDataForm.type1 = this.type1
          this.tableDataForm.type2 = this.type2
          //向后端发送请求，保存问题
          this.$request.post('/problemAddEdit', this.tableDataForm).then(result => {
            if (result.code === 401) {
              this.$router.push('UserLogin')
              alert("您未登录，请登录")
            } else {
              alert("保存成功")
              this.dialogVisibleAddP = false
              this.queryUse(1)
            }
          })
        }
      }

    },
    // 初始化 wangEditor
    initEditor() {
      // 检查是否已经存在编辑器实例
      if (this.editor) {
        return; // 如果已经存在，则直接返回，不重复初始化
      }
      this.editor = new E(this.$refs.editorContainer);
      this.editor.config.menus = [
        'head',
        'bold',
        'italic',
        'underline',
        'strikeThrough',
        'foreColor',
        'backColor',
        'list',
        'justify',
        'table',
        // 其他你需要的菜单...
      ]
      this.editor.create();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //弹框的关闭提示
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            console.log(_)
            done();
            if (this.editor) {
              this.editor.destroy();
              this.editor = null;
            }
          })
          .catch(_ => {
            console.log(_)
          });
    },
    //编辑问题中的内容,点击不同的区域，传入不同的数据
    editProb(doe) {
      //判断用户是否选择了问题
      if (this.tableDataTemp === '') {
        alert("请先选择问题")
        return
      }
      let strtemp = localStorage.getItem('userName').toLowerCase().replace(/"/g, '')
      //判断用户权限，暂时没有开发，需要更加用户的工号，判断是否有编辑权限。
      if (this.userPermissions !== 1 && !this.tableDataTemp.liabilityNub.toLowerCase().includes(strtemp)) {
        let str = '问题的责任人未包含您，问题责任人的工号为:' + this.tableDataTemp.liabilityNub
        alert(str)
        return;
      }
      //把用户选择的节点传递出去
      this.doeSave = doe
      //编辑问题描述
      if (doe === 1) {
        this.titleUse = '您正在编辑《问题描述》'
        this.dialogVisible = true
        this.$nextTick(() => {
          this.initEditor();
          this.editor.txt.html(this.tableDataTemp.describeUse)
        })
      } else if (doe === 2) {
        this.titleUse = '您正在编辑《问题数量》'
        this.dialogVisibleNub = true
      } else if (doe === 3) {
        this.titleUse = '您正在编辑《现状调查》'
        this.dialogVisible = true
        this.$nextTick(() => {
          this.initEditor();
          this.editor.txt.html(this.tableDataTemp.statusUse)
        })
      } else if (doe === 4) {
        this.titleUse = '您正在编辑《发生源》'
        this.dialogVisible = true
        this.$nextTick(() => {
          this.initEditor();
          this.editor.txt.html(this.tableDataTemp.origin)
        })
      } else if (doe === 5) {
        this.titleUse = '您正在编辑《流出源》'
        this.dialogVisible = true
        this.$nextTick(() => {
          this.initEditor();
          this.editor.txt.html(this.tableDataTemp.outflow)
        })
      } else if (doe === 6) {
        this.titleUse = '您正在编辑《纠正》'
        this.dialogVisible = true
        this.$nextTick(() => {
          this.initEditor();
          this.editor.txt.html(this.tableDataTemp.correct)
        })
      } else if (doe === 7) {
        this.titleUse = '您正在编辑《纠正完成时间》'
        this.dialogVisibleDate = true
      } else if (doe === 8) {
        this.titleUse = '您正在编辑《纠正负责人》'
        this.dialogVisibleName = true
      } else if (doe === 9) {
        this.titleUse = '您正在编辑《纠正输出》'
        this.dialogVisibleName = true
      } else if (doe === 10) {
        this.titleUse = '您正在编辑《纠正效果评价》'
        this.dialogVisibleName = true
      } else if (doe === 11) {
        this.titleUse = '您正在编辑《纠正验证完成时间》'
        this.dialogVisibleDate = true
      } else if (doe === 12) {
        this.titleUse = '您正在编辑《临时措施》'
        this.dialogVisible = true
        this.$nextTick(() => {
          this.initEditor();
          this.editor.txt.html(this.tableDataTemp.temporaryUse)
        })
      } else if (doe === 13) {
        this.titleUse = '您正在编辑《临时措施的完成时间》'
        this.dialogVisibleDate = true
      } else if (doe === 14) {
        this.titleUse = '您正在编辑《临时措施的负责人》'
        this.dialogVisibleName = true
      } else if (doe === 15) {
        this.titleUse = '您正在编辑《临时措施的输出》'
        this.dialogVisibleName = true
      } else if (doe === 16) {
        this.titleUse = '您正在编辑《临时措施的效果评价》'
        this.dialogVisibleName = true
      } else if (doe === 17) {
        this.titleUse = '您正在编辑《临时措施的效果评价完成时间》'
        this.dialogVisibleDate = true
      } else if (doe === 18) {
        this.titleUse = '您正在编辑《长远措施》'
        this.dialogVisible = true
        this.$nextTick(() => {
          this.initEditor();
          this.editor.txt.html(this.tableDataTemp.permanent)
        })
      } else if (doe === 19) {
        this.titleUse = '您正在编辑《长远措施的完成时间》'
        this.dialogVisibleDate = true
      } else if (doe === 20) {
        this.titleUse = '您正在编辑《长远措施的负责人》'
        this.dialogVisibleName = true
      } else if (doe === 21) {
        this.titleUse = '您正在编辑《长远措施的输出》'
        this.dialogVisibleName = true
      } else if (doe === 22) {
        this.titleUse = '您正在编辑《长远措施的效果评价》'
        this.dialogVisibleName = true
      } else if (doe === 23) {
        this.titleUse = '您正在编辑《长远措施的效果评价完成时间》'
        this.dialogVisibleDate = true
      } else if (doe === 24) {
        this.titleUse = '您正在编辑《反省不足》'
        this.dialogVisible = true
        this.$nextTick(() => {
          this.initEditor();
          this.editor.txt.html(this.tableDataTemp.introspection)
        })
      } else if (doe === 25) {
        this.titleUse = '您正在编辑《反省不足的完成时间》'
        this.dialogVisibleDate = true
      } else if (doe === 26) {
        this.titleUse = '您正在编辑《反省不足的负责人》'
        this.dialogVisibleName = true
      } else if (doe === 27) {
        this.titleUse = '您正在编辑《反省不足的输出》'
        this.dialogVisibleName = true
      } else if (doe === 28) {
        this.titleUse = '您正在编辑《反省不足的效果评价》'
        this.dialogVisibleName = true
      } else if (doe === 29) {
        this.titleUse = '您正在编辑《反省不足的效果评价完成时间》'
        this.dialogVisibleDate = true
      } else if (doe === 30) {
        this.titleUse = '您正在编辑《切换时间》'
        this.dialogVisibleDate = true
      } else if (doe === 31) {
        this.titleUse = '您正在编辑《切换工件号》'
        this.dialogVisibleName = true
      } else if (doe === 32) {
        this.titleUse = '您正在编辑《是否结题》'
        this.dialogVisibleYes = true
      } else if (doe === 33) {
        this.titleUse = '您正在编辑《是否汇报》'
        this.dialogVisibleYes = true
      } else if (doe === 34) {
        this.titleUse = '您正在编辑《结论先行》'
        this.dialogVisibleName = true
      }
    },
    //编辑问题，向后端传递的函数（字符串类，富文本）
    saveJava(idUse, field, val) {
      this.$request.post('/saveProblem', {idUse, field, val}).then(result => {
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        } else {
          alert("保存成功")
          //修改数据,列表中的数据
          this.tableDataTemp[field] = val
          let index = -1
          //修改数据，总表的数据
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].idUse === idUse) {
              index = i
              break
            }
          }
          if (index !== -1) {
            this.tableData[index][field] = val
          } else {
            alert("程序有误，请联系管理员")
          }
        }
      })
    },
    //编辑问题，向后端传递的函数（数字类）
    saveJavaNmb(idUse, field, val) {
      this.$request.post('/saveProblemNmb', {idUse, field, val}).then(result => {
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        } else {
          alert("保存成功")
          //修改数据,列表中的数据
          this.tableDataTemp[field] = val
          let index = -1
          //修改数据，总表的数据
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].idUse === idUse) {
              index = i
              break
            }
          }
          if (index !== -1) {
            this.tableData[index][field] = val
          } else {
            alert("程序有误，请联系管理员")
          }
        }
      })
    },
    //编辑问题，向后端传递的函数（文本日期类）
    saveJavaDate(idUse, field, val) {
      //需要把数据处理，处理为yyyy-mm-dd格式的日期
      const date = new Date(val);
      const year = date.getFullYear().toString().padStart(4, '0');
      const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
      const day = date.getDate().toString().padStart(2, '0');
      val = `${year}-${month}-${day}`

      this.$request.post('/saveProblem', {idUse, field, val}).then(result => {
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        } else {
          alert("保存成功")
          //修改数据,列表中的数据
          this.tableDataTemp[field] = val
          let index = -1
          //修改数据，总表的数据
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].idUse === idUse) {
              index = i
              break
            }
          }
          if (index !== -1) {
            this.tableData[index][field] = val
          } else {
            alert("程序有误，请联系管理员")
          }
        }
      })
    },
    //编辑问题弹窗打开后，点击确定保存
    saveProblem() {
      //判断用户选择的是那个区域
      if (this.doeSave === 1) {
        //点击确定，向后端发送请求的函数，并修改数据
        this.saveJava(this.tableDataTemp.idUse, 'describeUse', this.editor.txt.html())
        this.dialogVisible = false
      } else if (this.doeSave === 2) {
        this.saveJavaNmb(this.tableDataTemp.idUse, 'quantity', this.inputNub)
        this.dialogVisibleNub = false
      } else if (this.doeSave === 3) {
        this.saveJava(this.tableDataTemp.idUse, 'statusUse', this.editor.txt.html())
        this.dialogVisible = false
      } else if (this.doeSave === 4) {
        this.saveJava(this.tableDataTemp.idUse, 'origin', this.editor.txt.html())
        this.dialogVisible = false
      } else if (this.doeSave === 5) {
        this.saveJava(this.tableDataTemp.idUse, 'outflow', this.editor.txt.html())
        this.dialogVisible = false
      } else if (this.doeSave === 6) {
        this.saveJava(this.tableDataTemp.idUse, 'correct', this.editor.txt.html())
        this.dialogVisible = false
      } else if (this.doeSave === 7) {
        this.saveJavaDate(this.tableDataTemp.idUse, 'correctDate', this.valueDate)
        this.dialogVisibleDate = false
      } else if (this.doeSave === 8) {
        this.saveJava(this.tableDataTemp.idUse, 'correctLiability', this.inputName)
        this.dialogVisibleName = false
      } else if (this.doeSave === 9) {
        this.saveJava(this.tableDataTemp.idUse, 'correctOut', this.inputName)
        this.dialogVisibleName = false
      } else if (this.doeSave === 10) {
        this.saveJava(this.tableDataTemp.idUse, 'correctResult', this.inputName)
        this.dialogVisibleName = false
      } else if (this.doeSave === 11) {
        this.saveJavaDate(this.tableDataTemp.idUse, 'correctValidate', this.valueDate)
        this.dialogVisibleDate = false
      } else if (this.doeSave === 12) {
        this.saveJava(this.tableDataTemp.idUse, 'temporaryUse', this.editor.txt.html())
        this.dialogVisible = false
      } else if (this.doeSave === 13) {
        this.saveJavaDate(this.tableDataTemp.idUse, 'temporaryDate', this.valueDate)
        this.dialogVisibleDate = false
      } else if (this.doeSave === 14) {
        this.saveJava(this.tableDataTemp.idUse, 'temporaryLiability', this.inputName)
        this.dialogVisibleName = false
      } else if (this.doeSave === 15) {
        this.saveJava(this.tableDataTemp.idUse, 'temporaryOut', this.inputName)
        this.dialogVisibleName = false
      } else if (this.doeSave === 16) {
        this.saveJava(this.tableDataTemp.idUse, 'temporaryResult', this.inputName)
        this.dialogVisibleName = false
      } else if (this.doeSave === 17) {
        this.saveJavaDate(this.tableDataTemp.idUse, 'temporaryValidate', this.valueDate)
        this.dialogVisibleDate = false
      } else if (this.doeSave === 18) {
        this.saveJava(this.tableDataTemp.idUse, 'permanent', this.editor.txt.html())
        this.dialogVisible = false
      } else if (this.doeSave === 19) {
        this.saveJavaDate(this.tableDataTemp.idUse, 'permanentDate', this.valueDate)
        this.dialogVisibleDate = false
      } else if (this.doeSave === 20) {
        this.saveJava(this.tableDataTemp.idUse, 'permanentLiability', this.inputName)
        this.dialogVisibleName = false
      } else if (this.doeSave === 21) {
        this.saveJava(this.tableDataTemp.idUse, 'permanentOut', this.inputName)
        this.dialogVisibleName = false
      } else if (this.doeSave === 22) {
        this.saveJava(this.tableDataTemp.idUse, 'permanentResult', this.inputName)
        this.dialogVisibleName = false
      } else if (this.doeSave === 23) {
        this.saveJavaDate(this.tableDataTemp.idUse, 'permanentValidate', this.valueDate)
        this.dialogVisibleDate = false
      } else if (this.doeSave === 24) {
        this.saveJava(this.tableDataTemp.idUse, 'introspection', this.editor.txt.html())
        this.dialogVisible = false
      } else if (this.doeSave === 25) {
        this.saveJavaDate(this.tableDataTemp.idUse, 'introspectionDate', this.valueDate)
        this.dialogVisibleDate = false
      } else if (this.doeSave === 26) {
        this.saveJava(this.tableDataTemp.idUse, 'introspectionLiability', this.inputName)
        this.dialogVisibleName = false
      } else if (this.doeSave === 27) {
        this.saveJava(this.tableDataTemp.idUse, 'introspectionOut', this.inputName)
        this.dialogVisibleName = false
      } else if (this.doeSave === 28) {
        this.saveJava(this.tableDataTemp.idUse, 'introspectionResult', this.inputName)
        this.dialogVisibleName = false
      } else if (this.doeSave === 29) {
        this.saveJavaDate(this.tableDataTemp.idUse, 'introspectionValidate', this.valueDate)
        this.dialogVisibleDate = false
      } else if (this.doeSave === 30) {
        this.saveJavaDate(this.tableDataTemp.idUse, 'switchDate', this.valueDate)
        this.dialogVisibleDate = false
      } else if (this.doeSave === 31) {
        this.saveJava(this.tableDataTemp.idUse, 'switchNumber', this.inputName)
        this.dialogVisibleName = false
      } else if (this.doeSave === 32) {
        let temp
        if (this.valueYes === true) {
          temp = '是'
        } else {
          temp = '否'
        }
        this.saveJava(this.tableDataTemp.idUse, 'finish', temp)
        this.dialogVisibleYes = false
      } else if (this.doeSave === 33) {
        let temp
        if (this.valueYes === true) {
          temp = '是'
        } else {
          temp = '否'
        }
        this.saveJava(this.tableDataTemp.idUse, 'report', temp)
        this.dialogVisibleYes = false
      } else if (this.doeSave === 34) {
        this.saveJava(this.tableDataTemp.idUse, 'conclusion', this.inputName)
        this.dialogVisibleName = false
      }
    },
// 辅助方法：将扁平化数据转换为树形结构
    convertTableDataToTree() {
      if (this.tableData === [] || this.tableData===undefined) {
        alert("筛选无内容，请重新筛选")
      }
      else {
        this.TreeList = []; // 清空现有的树列表
        const workshopMap = {}; // 用于存储车间节点的映射

        this.tableData.forEach(item => {
          const {workshop, drawing, op, problemName, idUse} = item; // 获取需要的属性

          // 检查车间节点是否存在，如果不存在则创建
          let workshopNode = workshopMap[workshop] || (workshopMap[workshop] = {
            label: workshop,
            children: [], // 确保 children 是一个数组
          });
          if (!this.TreeList.includes(workshopNode)) {
            this.TreeList.push(workshopNode); // 将新创建的车间节点添加到树列表中
          }

          // 检查图纸节点是否存在，如果不存在则创建，并添加到车间节点下
          let drawingNode = workshopNode.children.find(child => child.label === drawing) || {
            label: drawing,
            children: [], // 确保 children 是一个数组
          };
          if (!workshopNode.children.includes(drawingNode)) {
            workshopNode.children.push(drawingNode); // 如果图纸节点不存在，直接添加到数组中
          }

          let opNode = drawingNode.children.find(child => child.label === op) || {
            label: op,
            children: [], // 确保 children 是一个数组
          };
          if (!drawingNode.children.includes(opNode)) {
            drawingNode.children.push(opNode); // 如果操作节点不存在，添加到数组中
          }

          // 创建问题节点
          const problemNode = {
            label: problemName,
            idUse: idUse
          };
          opNode.children.push(problemNode); // 将问题节点添加到操作节点的子节点数组中
        });
      }
    },
    //单击导航后的反应
    handleNodeClick(data) {
      // 检查是否点击了problemName节点
      if (data.idUse !== undefined) {
        let index = this.tableData.findIndex(item => item.idUse === data.idUse);
        this.tableDataTemp = this.tableData[index]
        //把用户选择的问题索引传递出去，其他函数中应用。
        this.problemIndex = index
        //对图片进行回显
        //组合照片的数据
        this.describePictureList=[]
        if (this.tableDataTemp.describeAnnex!==''){
          const temp1=this.tableDataTemp.describeAnnex.split('|*|')
          for (let i = 0; i < temp1.length-1; i++) {
            let temp2={
              name:temp1[i],
              percentage:0,
              raw:File,
              size:0,
              status:null,
              uid:null,
              url: filepath+temp1[i]
            }
            this.describePictureList.push(temp2)
          }

        }

//判断用户级别，锁定是否可以去编辑图片
        if (this.usePower===1 || this.tableDataTemp.liabilityNub.includes(this.useId)){
          this.describeAnnexDisabled=false
        }else {
          this.describeAnnexDisabled=true
        }

      }
    },
    //重新刷新页面，向后端调动程序
    mountedNew() {
      this.TreeList = []
      //向后端发送请求，显示问题列表
      this.$request.post('/problemAllList').then(result => {
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        } else {
          this.tableData = result.data
          /*组合导航栏的数据*/
          this.convertTableDataToTree()
        }
      })
      //查询用户的权限，并且赋值
      const user = localStorage.getItem('userName')
      this.$request.post('/problemUse', user).then(result => {
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        } else {
          this.userPermissions = result.data
          this.tableDataTemp = ''
        }
      })
    },
    //查询问题的函数
    queryUse(doe) {
        this.queryUseType = doe
        if (doe === 1) {
          //点击查询所有汇报的.(包括自己的，别人的）
          //向后端查询，所有需要汇报的项目。
          this.$request.post("problemAllListType", {
            intValue: 1, // 假设这是你的int类型值
            str1: "someString", // 第一个字符串
            str2: "anotherString", // 第二个字符串
            str3: "thirdString" // 第三个字符串
          }).then(result => {
            if (result.code === 401) {
              this.$router.push('UserLogin')
              alert("您未登录，请登录")
            } else {
              this.tableData = []
              this.tableDataTemp = ''
              this.tableData = result.data
              /*组合导航栏的数据*/
              this.convertTableDataToTree()
              this.typeUseName = '汇报项目'
              this.drawer = true
              //设置按钮的颜色
              this.background1 = {backgroundColor: '#0269fa'}
              this.background2 = ''
              this.background3 = ''
              this.background4 = ''
            }
          })
        }
        else if (doe === 2) {
          //向后端查询，所有的问题项目。包括自己的，别人的，结题未结题的。
          //点击了查询所有的问题
          this.$request.post("problemAllListType", {
            intValue: 2, // 假设这是你的int类型值
            str1: "someString", // 第一个字符串
            str2: "anotherString", // 第二个字符串
            str3: "thirdString" // 第三个字符串
          }).then(result => {
            if (result.code === 401) {
              this.$router.push('UserLogin')
              alert("您未登录，请登录")
            } else {
              this.tableData = []
              this.tableDataTemp = ''
              this.tableData = result.data
              /*组合导航栏的数据*/
              this.convertTableDataToTree()
              this.typeUseName = '所有项目'
              this.drawer = true
              //设置按钮的颜色
              this.background1 = ''
              this.background2 = {backgroundColor: '#0269fa'}
              this.background3 = ''
              this.background4 = ''
            }
          })
        }
        else if (doe===3){
          //按照录入日期查询的弹窗
          //设置按钮的颜色
          this.background1 = ''
          this.background2 = ''
          this.background3 = {backgroundColor: '#0269fa'}
          this.background4 = ''
          //弹窗显示
          this.titleUse='您正在按照录入日期筛选'
          this.dialogVisibleSelData=true

        }
        else if (doe===4){
          //按照发生日期查询的弹窗
          //设置按钮的颜色
          this.background1 = ''
          this.background2 = ''
          this.background3 = ''
          this.background4 = {backgroundColor: '#0269fa'}
          //弹窗显示
          this.titleUse='您正在按照录入日期筛选'
          this.dialogVisibleSelData=true
        }

    },
    //查询问题的函数，用户选择了日期后触发
    selData(){
      //把用户选择的时间处理一下，处理成标准的日期格式
      //需要把数据处理，处理为yyyy-mm-dd格式的日期
      const date = new Date(this.valueSelDate);
      const year = date.getFullYear().toString().padStart(4, '0');
      const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
      const day = date.getDate().toString().padStart(2, '0');
      const valDate = `${year}-${month}-${day}`
      //判断是哪类查询。
      //筛选自己的+未结题的+按照录入日期筛选
      if (this.radioType1==='my' && this.radioType2==='noEnd' && this.queryUseType===3){
        this.$request.post('/problemInputDateQuery',{
          isMy:this.useId,
          isEnd:'noEnd',
          isDate:valDate
        }).then(result=>{
          if (result.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          } else {
            //更新数据列表
            this.tableData = []
            this.tableDataTemp = ''
            console.log(this.tableData)
            if (result.data!==null){
              this.tableData = result.data
            }
            /*组合导航栏的数据*/
            this.convertTableDataToTree()
            this.typeUseName = '我自己的未结题项目'
            this.drawer = true
            this.dialogVisibleSelData=false
          }
        })
      }
      //筛选自己的+已结题的+按照录入日期筛选
      else if (this.radioType1==='my' && this.radioType2==='end' && this.queryUseType===3){
        this.$request.post('/problemInputDateQuery',{
          isMy:this.useId,
          isEnd:'end',
          isDate:valDate
        }).then(result=>{
          if (result.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          } else {
            //更新数据列表
            this.tableData = []
            this.tableDataTemp = ''
            console.log(this.tableData)
            if (result.data!==null){
              this.tableData = result.data
            }
            /*组合导航栏的数据*/
            this.convertTableDataToTree()
            this.typeUseName = '我自己的未结题项目'
            this.drawer = true
            this.dialogVisibleSelData=false
          }
        })
      }
      //筛选自己的+全部+按照录入日期筛选
      else if (this.radioType1==='my' && this.radioType2==='all' && this.queryUseType===3){
        this.$request.post('/problemInputDateQuery',{
          isMy:this.useId,
          isEnd:'all',
          isDate:valDate
        }).then(result=>{
          if (result.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          } else {
            //更新数据列表
            this.tableData = []
            this.tableDataTemp = ''
            console.log(this.tableData)
            if (result.data!==null){
              this.tableData = result.data
            }
            /*组合导航栏的数据*/
            this.convertTableDataToTree()
            this.typeUseName = '我自己的未结题项目'
            this.drawer = true
            this.dialogVisibleSelData=false
          }
        })
      }
      //筛选全部的+未结题+按照录入日期筛选
      else if (this.radioType1==='all' && this.radioType2==='noEnd' && this.queryUseType===3){
        this.$request.post('/problemInputDateQuery',{
          isMy:'all',
          isEnd:'noEnd',
          isDate:valDate
        }).then(result=>{
          if (result.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          } else {
            //更新数据列表
            this.tableData = []
            this.tableDataTemp = ''
            console.log(this.tableData)
            if (result.data!==null){
              this.tableData = result.data
            }
            /*组合导航栏的数据*/
            this.convertTableDataToTree()
            this.typeUseName = '我自己的未结题项目'
            this.drawer = true
            this.dialogVisibleSelData=false
          }
        })
      }
      //筛选全部的+已结题+按照录入日期筛选
      else if (this.radioType1==='all' && this.radioType2==='end'  && this.queryUseType===3){
        this.$request.post('/problemInputDateQuery',{
          isMy:'all',
          isEnd:'end',
          isDate:valDate
        }).then(result=>{
          if (result.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          } else {
            //更新数据列表
            this.tableData = []
            this.tableDataTemp = ''
            console.log(this.tableData)
            if (result.data!==null){
              this.tableData = result.data
            }
            /*组合导航栏的数据*/
            this.convertTableDataToTree()
            this.typeUseName = '我自己的未结题项目'
            this.drawer = true
            this.dialogVisibleSelData=false
          }
        })
      }
      //筛选全部的+所有问题+按照录入日期筛选
      else if (this.radioType1==='all' && this.radioType2==='all' && this.queryUseType===3){
        this.$request.post('/problemInputDateQuery',{
          isMy:'all',
          isEnd:'all',
          isDate:valDate
        }).then(result=>{
          if (result.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          } else {
            //更新数据列表
            this.tableData = []
            this.tableDataTemp = ''
            console.log(this.tableData)
            if (result.data!==null){
              this.tableData = result.data
            }
            /*组合导航栏的数据*/
            this.convertTableDataToTree()
            this.typeUseName = '我自己的未结题项目'
            this.drawer = true
            this.dialogVisibleSelData=false
          }
        })
      }
    },
    //点击上一条、下一条的反应
    rollingOne(doe) {
      if (this.tableData.length <= 1) {
        alert("请先选择问题后进行操作")
        return
      }
      if (doe === 1) {
        if (this.problemIndex === 0 || this.problemIndex === -1) {
          this.problemIndex = this.tableData.length - 1
          this.tableDataTemp = this.tableData[this.problemIndex]
        } else {
          this.problemIndex = this.problemIndex - 1
          this.tableDataTemp = this.tableData[this.problemIndex]
        }
      } else if (doe === 2) {
        if (this.problemIndex === this.tableData.length - 1) {
          this.problemIndex = 0
          this.tableDataTemp = this.tableData[this.problemIndex]
        } else {
          this.problemIndex = this.problemIndex + 1
          this.tableDataTemp = this.tableData[this.problemIndex]
        }
      }
    },
    //在“管理平台中”，点击编辑后的状态
    handleEdit(scope, doe) {
      if (doe === 1) {
        this.adddoe=2
        this.tableDataForm = _.cloneDeep(scope.row);
        this.type1 = this.tableDataForm.type1
        this.type2 = this.tableDataForm.type2
        this.dialogVisibleAddP = true
      }
      if (doe === 2) {
        this.tableDataTemp = scope.row
        this.activeName = 'first'
      }
    },
    //在“管理平台中”，点击编辑"是否汇报"后的状态
    management(scope, doe) {
      if (doe === 1) {
        this.tableDataTemp = scope.row
        if (scope.row.report === '是') {
          this.valueYes = true
        } else if (scope.row.report === '否') {
          this.valueYes = false
        }
        this.editProb(33)
      }
    },
    //选择语言的函数
    chooseLanguage(language){
      this.languageS=language
    },
    /*问题描述的附件上传函数*/
    //1.保存文件
    saveFileDescribeAnnex(file, fileList){
      console.log(fileList)
      const formData = new FormData()
      //把文件数据放进去
      formData.append('file', file.raw)
      //把原来的图片字符串放进去，作为修改用
      formData.append('id',this.tableDataTemp.idUse)
      formData.append('describeAnnex',this.tableDataTemp.describeAnnex)
//需要返回修改后的图片地址保存数据，并并且进行赋值
      this.$requestFile.post('/describeAnnex',formData).then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        }else {
          if (result.data===null){
            alert("程序出现异常，请联系管理员")
          }else {
            //更新数据
            this.tableDataTemp.describeAnnex=result.data
            this.tableData[this.problemIndex].describeAnnex=result.data
            //对图片进行回显
            //组合照片的数据
            this.describePictureList=[]
            if (this.tableDataTemp.describeAnnex!==''){
              const temp1=this.tableDataTemp.describeAnnex.split('|*|')
              for (let i = 0; i < temp1.length-1; i++) {
                let temp2={
                  name:temp1[i],
                  percentage:0,
                  raw:File,
                  size:0,
                  status:null,
                  uid:null,
                  url: filepath+temp1[i]
                }
                this.describePictureList.push(temp2)
              }

            }
          }
        }
      })
    },
    //2.放大图片用到的函数
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVP = true;
    },
    //3.下载图片的函数
    //点击图片下载按钮
    handleDownload(file) {
      console.log(file.name)
      //向后端发送请求，下载文件
      this.$request.get('/oilDownload?fileName=' + encodeURIComponent(file.name)).then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        }
        else {
          let base64Data = 'data:application/octet-stream;base64,' + result.data//
          // 创建一个Blob对象
          let blob = this.dataURItoBlob(base64Data);
          // 触发下载
          this.downloadBlob(blob, file.name);
        }
      }).catch(error => {
        // 处理请求错误
        console.error("请求出错", error);
      })
    },
    //4.移除照片的函数
    //照片移除的函数
    handleRemove(file) {
      const index = this.describePictureList.findIndex(item => item.name === file.name)
      this.describePictureList.splice(index,1)
      //发送请求，执行删除文件，发送的是这一行的id，记录图片地址的字符串，以及需要修改的字段，为了减少后端的写的代码，重新返回新的文件名的序列内容，并且更新。
      //组合数据，首先得到删除文件后的数据。
      let temp = this.tableDataTemp.describeAnnex.replace(file.name+'|*|','')
      this.$request.post('/describeRemove',{
        id:this.tableDataTemp.idUse,
        fieldName:'describeAnnex',
        filedValue:temp,
        pictureName:file.name
      }).then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        }
        else {
          if (result.data==='删除文件时出错'){
            alert("删除文件出错，请联系管理员")
          }else {
            //对图片进行回显
            //组合照片的数据
            //更新数据
            this.tableDataTemp.describeAnnex=result.data
            this.tableData[this.problemIndex].describeAnnex=result.data
            this.describePictureList=[]
            if (this.tableDataTemp.describeAnnex!==''){
              const temp1=this.tableDataTemp.describeAnnex.split('|*|')
              for (let i = 0; i < temp1.length-1; i++) {
                let temp2={
                  name:temp1[i],
                  percentage:0,
                  raw:File,
                  size:0,
                  status:null,
                  uid:null,
                  url: filepath+temp1[i]
                }
                this.describePictureList.push(temp2)
              }

            }
          }
        }
      })
    },
    // 辅助函数：将Base64编码的字符串转换为Blob对象
    dataURItoBlob(dataURI) {
      // 分离出头部信息,得到数据部分
      let byteString;
      if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
      else
        byteString = unescape(dataURI.split(',')[1]);

      // 写入数组缓冲区
      let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
      let ia = new Uint8Array(byteString.length);
      for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      return new Blob([ia], {type:mimeString});
    },
    // 辅助函数：触发Blob对象的下载
    downloadBlob(blob, fileName) {
      let link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = fileName;
      link.click();
      window.URL.revokeObjectURL(link.href);
    },
  },
  mounted() {
    this.tableDataTemp = ''
    this.queryUse(1)
    //向后端查询用户的权限
    this.inquiry()
    if (this.usePower===1){
      this.describeAnnexDisabled=false
    }
  },
  //组件销毁前的函数
  beforeDestroy() {
    // 组件销毁前，销毁 wangEditor 实例
    if (this.editor) {
      this.editor.destroy();
      this.editor = null;
    }
  },
}
</script>

<style scoped>
/* 主体左侧的工作步骤栏用到的数据包围的div的样式*/

.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  border-left-color: white;
  border-top: white;
}

.el-aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  height: 89vh;
}

.el-main {
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-left-color: white;
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.headMain{
  color: #ffffff; /* 设置字体颜色为红色 */
  font-size: 18px;
}
.center-text {
  /* 使用 margin-left 和 margin-right auto 来实现居中效果 */
  margin-left: auto;
  margin-right: auto;
  /* 注意：如果 header 内只有这两个元素，你可能不需要 margin-right: auto */
}

/*自定义样式*/

.blue-border {
  border-collapse: collapse; /* 合并相邻的边框 */
  width: 100%; /* 设置表格宽度为100% */
}

.blue-border th,
.blue-border td {
  border: 1px solid blue; /* 设置边框颜色为蓝色，宽度为1px */
  padding: 8px; /* 设置单元格内边距，以使内容更清晰可见 */
}

/* 如果你只想为thead和tbody中的单元格设置边框，可以分别指定 */
.blue-border thead th,
.blue-border tbody td {
  /* 这里可以添加额外的thead或tbody特定的样式 */
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.dialog-footer {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中（如果按钮不是单行的话）*/
  padding: 10px; /* 你可以根据需要调整内边距 */
}

</style>